<template>
  <div class="download-wrap mt20 pt10 pb10 pl18 pr18">
    <el-button type="primary" plain>导出</el-button>
  </div>
  <div class="products-list" style="overflow-x: auto">
    <div class="my-table" style="min-width: 2800px" v-if="list.length > 0">
      <div class="table-header">
        <div>
          <div class="row">
            <div class="col1">采购编码</div>
            <div class="col6">收款计划</div>
            <div class="col4">应收总额</div>
            <div class="col4">本次应收金额</div>
            <div class="col4">订单已收金额</div>
            <div class="col4">订单未收金额</div>
            <div class="col5">税额</div>
            <div class="col4">不含税总价</div>
            <div class="col4">含税总价</div>
            <div class="col4">返佣金额</div>
            <div class="col4">订单时间</div>
            <div class="col5">是否开票</div>
            <div class="col4">是否回传发票</div>
            <div class="col4">预计发货时间</div>
            <div class="col5">订单状态</div>
            <div class="col5">支付状态</div>
            <div class="col6">收货信息</div>
          </div>
        </div>
      </div>

      <div class="table-body">
        <div class="list-item" v-for="(item, index) in list" :key="index">
          <div class="row">
            <div class="col1">
              <!-- 采购编码 -->
              <el-button type="primary" link @click="toPath">{{ "xxxxxx" }}</el-button>
            </div>
            <div class="col6">
              <!-- 收款计划 -->
              <el-button type="primary" link @click="_isOpen = true" :title="'xxx'">
                {{ "1期款项-接采购单即付款：¥2800.00" }}
              </el-button>
            </div>
            <div class="col4">
              <!-- 应收总额 -->
              <span style="color: #ff3333">{{ "¥2599.00" }}</span>
            </div>
            <div class="col4">
              <!-- 本次应收金额 -->
              {{ "-" }}
            </div>
            <div class="col4">
              <!-- 订单已收金额 -->
              {{ "-" }}
            </div>
            <div class="col4">
              <!-- 订单未收金额 -->
              {{ "-" }}
            </div>
            <div class="col5">
              <!-- 税额 -->
              {{ "-" }}
            </div>
            <div class="col4">
              <!-- 不含税总价 -->
              {{ "-" }}
            </div>
            <div class="col4">
              <!-- 含税总价 -->
              {{ "-" }}
            </div>
            <div class="col4">
              <!-- 返佣金额 -->
              {{ "-" }}
            </div>
            <div class="col4">
              <!-- 订单时间 -->
              {{ "-" }}
            </div>
            <div class="col5">
              <!-- 是否开票 -->
              {{ "-" }}
            </div>
            <div class="col4">
              <!-- 是否回传发票 -->
              {{ "-" }}
            </div>
            <div class="col4">
              <!-- 预计发货时间 -->
              {{ "-" }}
            </div>
            <div class="col5">
              <!-- 订单状态 -->
              <el-tag type="primary">部分发货</el-tag>
              <!-- <el-tag type="primary" v-show="item.factoryState === 5">部分发货</el-tag>
              <el-tag type="success" v-show="item.factoryState === 6">已发货</el-tag>
              <el-tag type="warning" v-show="item.factoryState === 4">待发货</el-tag>
              <el-tag type="warning" v-show="item.factoryState === 2">待接单</el-tag>
              <el-tag type="danger" v-show="item.factoryState === 3">已拒绝</el-tag>
              <el-tag type="info" v-show="item.factoryState === 9">已关闭</el-tag>
              <el-tag type="danger" v-show="item.factoryState === 20">已撤销</el-tag> -->
            </div>
            <div class="col5">
              <!-- 支付状态 -->
              <el-tag type="warning">待支付</el-tag>
              <!-- <el-tag type="primary">部分支付</el-tag>
              <el-tag type="success">已支付</el-tag> -->
            </div>
            <div class="col6">
              <!-- 收获信息 -->
              {{ "-" }}
            </div>
          </div>
          <div class="tips">
            <p class="mb4 f12">关联客户：王程慧 / 15712897080 / 重庆市重庆市沙坪坝区招 商渝天府xxx街道xx栋楼</p>
            <p class="f12">收货信息：王程慧 / 15712897080 / 重庆市重庆市沙坪坝区招 商渝天府xxx街道xx栋楼</p>
          </div>
        </div>
      </div>
    </div>
    <div v-else style="display: flex; justify-content: center; width: 100%">
      <el-empty description="这里暂时什么都没有" />
    </div>

    <!-- 收款计划明细 -->
    <PaymentPlan v-model:isOpen="_isOpen" :optionInfo="optionInfo" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
import PaymentPlan from "./paymentPlan";

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
});
const _isOpen = ref(false);
const optionInfo = ref({ detail: [{}, {}, {}, {}, {}, {}] });

//打开新的页签
const toPath = () => {
  const routeUrl = router.resolve({ path: "/order/procure/detail", query: { purchaseOrderId: "1853730087226765312" } });
  window.open(routeUrl.href, "_blank");
};
</script>

<style lang="scss" scoped>
.download-wrap {
  border: 1px solid #e1e6ed;
  border-bottom: none;
}
.products-list {
  .table-header {
    background-color: #f2f6fc;
    margin-bottom: 10px;
    border: 1px solid #e1e6ed;
  }
  .table-body {
    // max-height: calc(100vh - 345px);
    .green {
      color: #00b42a;
    }
    .red {
      color: #ff3333;
    }
    // overflow: auto;
    .list-item {
      margin-bottom: 10px;
      & > div {
        border: 1px solid #e1e6ed;
        &.row {
          display: flex;
          & > div:not(:last-of-type) {
            border-right: 1px solid #e1e6ed;
          }
        }
        & > div {
          display: flex;
          align-items: center;
        }
      }
      .col1 {
        min-width: 200px;
        & > div {
          display: flex;
        }

        .left {
          img {
            width: 80px;
            height: 80px;
            border-radius: 4px;
          }
        }
        .right {
          padding-left: 18px;
          .name {
            font-size: 14px;
            color: #3d3d3d;
            margin-bottom: 5px;
          }
          p {
            font-size: 12px;
            color: #86909c;
            margin-bottom: 5px;
          }
        }
      }
      .tips {
        padding: 8px 20px;
        border-top: none;
        line-height: 22px;
        box-sizing: border-box;
        color: #4e5969;
      }
    }
  }
  .table-header,
  .table-body {
    & > div > div.row {
      display: flex;
      justify-content: space-between;
      & > div {
        padding: 14px 20px;
        display: flex;
        flex-wrap: wrap;
        :deep(.el-button.el-button--primary.is-link) {
          span {
            // white-space: break-spaces;
            // word-break: break-all;
            display: inline-block;
            max-width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border-bottom: 1px solid #007dff;
          }
        }
        &.col1 {
          // width: 45%;
          flex: 1;
          min-width: 200px;
        }

        &.col4 {
          width: 160px;
          min-width: 160px;
          max-width: 160px;
          box-sizing: border-box;
        }
        &.col5 {
          width: 120px;
          min-width: 120px;
          max-width: 120px;
          box-sizing: border-box;
        }
        &.col6 {
          width: 200px;
          min-width: 200px;
          max-width: 200px;
          box-sizing: border-box;
        }
      }
    }
  }
}
</style>
